<template>
  <div id="app">
    <!-- 顶部导航栏 -->
    <HeaderBar></HeaderBar>
    <Tabbar>
      <TabbarItem path="/">
        <img slot="icon" src="./assets/tabbar/home.png" alt="">
        <div slot="title">首页</div>
      </TabbarItem>
      <TabbarItem path="/classify">
        <img slot="icon" src="./assets/tabbar/classify.png" alt="">
        <div class="title" slot="title">分类</div>
      </TabbarItem>
      <div class="cartCount">{{count}}</div>
      <TabbarItem path="/cart">
        <img slot="icon" src="./assets/tabbar/cart.png" alt="">
        <div slot="title">购物车</div>
      </TabbarItem>
      <TabbarItem path="/user">
        <img slot="icon" src="./assets/tabbar/mine.png" alt="">
        <div slot="title">我的</div>
      </TabbarItem>
    </Tabbar>
    <router-view/>
  </div>
</template>

<script>
import Tabbar from "./components/tabbar/Tabbar";
import TabbarItem from "./components/tabbar/TabbarItem";
// <!-- 顶部导航栏 -->
import HeaderBar from "./components/headerNav/NavigationBar"
export default {
  components:{
    Tabbar,
    TabbarItem,
    HeaderBar
  },
  computed:{
    count:function(){
      return this.$store.state.cartList.length
    }
  }
}
</script>

<style>
.cartCount
{
  width: 20px;
  height: 20px;
  position: absolute;
  bottom: 40px;
  left: 63%;
  text-align: center;
  line-height: 20px;
  font-size: 16px;
  border-radius: 50%;
  background-color:red;
  color: #fff;
}
.van-image__error, .van-image__img, .van-image__loading {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
}
</style>